โมดูลนี้เปลี่ยนจากเส้นทางคงที่ไปสู่เครื่องมือที่ตอบสนองต่อเหตุการณ์อย่างเป็นพลวัต โดยการจัดการกับ CanvasRenderingContext2D สถานะ เราเน้นการขยายความสามารถของแอปพลิเคชันผ่าน รูปแบบระดับสูง และการกรองเชิงคณิตศาสตร์

1. รูปแบบเครื่องมือระดับสูง

เครื่องมือเช่น tools.Line สรุปเหตุการณ์เมาส์โดยใช้ฟังก์ชันช่วยเหลือ เช่น trackDrag. ในทางกลับกัน, tools.Spray ใช้ การซ้ำตามช่วงเวลา ผ่าน setIntervalทำให้สามารถวางพิกเซลได้อย่างต่อเนื่องขณะที่กดเมาส์ไว้

2. ข้อจำกัดเชิงคณิตศาสตร์

การเลื่อนแบบสุ่มเพียงอย่างเดียวจะสร้างการกระจายตัวเป็นสี่เหลี่ยม ในการได้ผลลัพธ์แบบแปรงกลมธรรมชาติ เราใช้ทฤษฎีพีทาโกรัสในการกรองจุด: $x^2 + y^2 < r^2$ หรืออาจใช้พิกัดเชิงขั้วพร้อมกับ Math.sin และ Math.cos ในการแปลงหน่วย

3. การดำเนินการแบบรวมและสถานะ

นอกเหนือจากการวาดเส้นปกติ ค่า globalCompositeOperation ระบุว่าพิกเซลใหม่จะมีปฏิสัมพันธ์กับพิกเซลเดิมอย่างไร ตัวอย่างเช่น การตั้งค่าเป็น 'destination-out' ช่วยให้ tools.Erase ฟังก์ชันเปลี่ยนพิกเซลให้โปร่งใสแทนที่จะเพียงแค่ระบายเป็นสีขาว ควบคุมอินเทอร์เฟซเช่น controls.color และ controls.brushSize ให้การอัปเดตแบบเรียลไทม์กับ fillStyle และ lineWidth ตามลำดับ